# Export Applications

This chapter will introduce how to use `createBridgeComponent` to export your React application as a module that can be loaded remotely.

## Installation

import { PackageManagerTabs } from '@theme';

<PackageManagerTabs
  command={{
    npm: 'npm install @module-federation/bridge-react@latest',
    yarn: 'yarn add @module-federation/bridge-react@latest',
    pnpm: 'pnpm add @module-federation/bridge-react@latest',
  }}
/>

## Basic Usage

### Step 1: Create Export Entry

To export a React application, you need to create a dedicated export file and use `createBridgeComponent` to wrap the application as a remote module.

Assuming your application entry is `App.tsx`, create a new file `export-app.tsx`:

```tsx
// ./src/export-app.tsx
import App from './App';
import { createBridgeComponent } from '@module-federation/bridge-react';

// Use createBridgeComponent to wrap App as a remote module and export
export default createBridgeComponent({
  rootComponent: App
});
```

### Step 2: Configure `exposes` Export

Next, you need to configure Module Federation in your build tool to expose the created export file for use by other applications.

:::tip Build Tool Support
The following example uses Rsbuild configuration. Please adjust according to your build tool:
- **Rsbuild**: `@module-federation/rsbuild-plugin`
- **Rspack**: `@module-federation/enhanced/rspack`
- **Webpack**: `@module-federation/enhanced/webpack`
- **Vite**: `@module-federation/vite`

:::

```ts
// rsbuild.config.ts
import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';

export default {
  plugins: [
    pluginModuleFederation({
      name: 'remote1',
      exposes: {
        './export-app': './src/export-app.tsx', // Export application-type remote module
      },
    }),
  ],
};
```

## Bridge Router Configuration

React Bridge provides powerful routing coordination capabilities that can dynamically inject basename and route context passing based on the current path.

:::info Router Framework Support
- Bridge Router currently supports routing proxy functionality for React Router v5, v6, and v7 versions.

- It does not support other routing frameworks such as `@tanstack/react-router`. For applications using non-React Router frameworks, you need to explicitly disable `enableBridgeRouter` and handle routing logic yourself.

:::

### Enable Bridge Router

```ts
// rsbuild.config.ts
import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';

export default {
  plugins: [
    pluginModuleFederation({
      name: 'remote1',
      exposes: {
        './export-app': './src/export-app.tsx',
      },
      bridge: {
        // Enable Bridge Router routing capabilities, default is true
        enableBridgeRouter: true, 
      }
    }),
  ],
};
```

### Configuration Description

- **`enableBridgeRouter: true`** (default) - Automatically handles basename and routing coordination, supports React Router v5, v6, v7
- **`enableBridgeRouter: false`** - Disables Bridge's default routing proxy capabilities, users need to handle routing integration manually

:::warning Important
When enabling Bridge Router, do not configure `react-router-dom` as a shared dependency, otherwise it will cause routing functionality issues.
:::

## createBridgeComponent API Reference

### Function Signature

```tsx
function createBridgeComponent<T = any>(
  bridgeInfo: Omit<ProviderFnParams<T>, 'createRoot'>
): () => {
  render(info: RenderParams): Promise<void>;
  destroy(info: DestroyParams): void;
}
```

### ProviderFnParams\<T\>

Bridge component configuration parameters:

```tsx
interface ProviderFnParams<T> {
  // Root component
  rootComponent: React.ComponentType<T>;
  
  // Custom render function (optional)
  render?: (App: React.ReactElement, id?: HTMLElement | string) => RootType | Promise<RootType>;
  
  // Custom createRoot function (optional, React 18+)
  createRoot?: (container: Element | DocumentFragment, options?: CreateRootOptions) => Root;
  
  // Default createRoot options (React 18+)
  defaultRootOptions?: CreateRootOptions;
}
```

### RenderParams

Render parameters interface:

```tsx
interface RenderParams {
  moduleName?: string;
  basename?: string;
  memoryRoute?: {
    entryPath: string;
    initialState?: Record<string, unknown>;
  };
  dom: HTMLElement;                    // Target DOM element for rendering
  rootOptions?: CreateRootOptions;     // React 18+ createRoot options
  [key: string]: unknown;             // Other custom properties
}
```

### DestroyParams

Destroy parameters interface:

```tsx
interface DestroyParams {
  moduleName: string;
  dom: HTMLElement;
}
```

### CreateRootOptions

React 18+ createRoot options:

```tsx
interface CreateRootOptions {
  identifierPrefix?: string;                                    // Identifier prefix
  onRecoverableError?: (error: unknown) => void;              // Recoverable error handling
  transitionCallbacks?: unknown;                               // Transition callbacks
}
```

### Advanced Usage Examples

#### Custom Rendering Logic

```tsx
// ./src/export-app.tsx
import App from './App';
import { createBridgeComponent } from '@module-federation/bridge-react';
import { createRoot } from 'react-dom/client';

export default createBridgeComponent({
  rootComponent: App,
  
  // Custom render function
  render: (App, container) => {
    const root = createRoot(container as HTMLElement, {
      identifierPrefix: 'my-app-'
    });
    root.render(App);
    return root;
  },
  
  // Default createRoot options
  defaultRootOptions: {
    identifierPrefix: 'remote-app-',
    onRecoverableError: (error) => {
      console.error('Remote app recoverable error:', error);
    }
  }
});
```

#### Supporting Multiple Exports

```tsx
// ./src/export-app.tsx
import App from './App';
import Dashboard from './Dashboard';
import { createBridgeComponent } from '@module-federation/bridge-react';

// Export main application
export default createBridgeComponent({
  rootComponent: App
});

// Export dashboard component
export const dashboard = createBridgeComponent({
  rootComponent: Dashboard
});
```

Corresponding Module Federation configuration:

```ts
// rsbuild.config.ts
export default {
  plugins: [
    pluginModuleFederation({
      name: 'remote1',
      exposes: {
        './export-app': './src/export-app.tsx',     // Main application
        './dashboard': './src/export-app.tsx',      // Dashboard
      },
    }),
  ],
};
```

## Next Steps

After completing the export application configuration, you can continue reading [Loading Remote Applications](./load-app) to learn how to load this remote application in a host application.
